// 引入gulp模块
const gulp = require("gulp");
const fs = require("fs");
// 引入babel模块
const babel = require('gulp-babel')
// 引入browserify模块，对babel编译的js进行打包 
const browserify = require('gulp-browserify');
const rename = require('gulp-rename');
// 引入uglify 压缩模块
const uglify = require('gulp-uglify');
// 导入 less 插件包
const less = require('gulp-less');
// 导入 autoPrefix 插件包
const LessAutoprefix = require('less-plugin-autoprefix');
// 实例化对象
const autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });
// 导入合并 css 包
const concat = require('gulp-concat');
// 导入压缩 css 包
const cssmin = require('gulp-cssmin');
// 导入压缩 HTML 包
const htmlmin = require('gulp-htmlmin');

const livereload = require('gulp-livereload');
const connect = require('gulp-connect');
const opn = require('opn');

// 创建一个任务,任务名称为自定义的hello
gulp.task("hello", () => {
    console.log("Hello World!");
    // 返回一个可读流
    return fs.createReadStream("./package.json");
});

// 创建一个babel的任务
gulp.task("babel", () => {
    return gulp.src('./src/js/*.js') // 指定处理所有JS文件
        .pipe(babel({
            presets: ['@babel/preset-env']
        }))
        .pipe(gulp.dest('build/js')) // 指定编译后的文件目录
        .pipe(livereload());
});

// 声明任务 打包
gulp.task('browserify', () => {
    return gulp.src('./build/js/main.js')  //指定打包的入口文件
        .pipe(browserify())          // 将CommonJs语法转换为浏览器能识别的语法
        .pipe(rename('bundle.js'))   // 为了防止冲突将文件重命名
        .pipe(gulp.dest('build/js')) // 输出到指定位置
        .pipe(livereload());
});

// 声明任务 压缩
gulp.task('uglify', function () {
    return gulp.src('build/js/bundle.js')
        .pipe(uglify())  //压缩js    
        .pipe(rename('bundle.min.js'))
        .pipe(gulp.dest('dist/js'))
        .pipe(livereload());
});

// 默认任务, 串连多个任务
gulp.task('default', gulp.series('babel', 'browserify', 'uglify'));

// 定义less的编译任务
gulp.task('less', function () {
    return gulp.src('./src/less/*.less')
        .pipe(less({
            plugins: [autoprefix] // 自动扩展前缀
        }))
        .pipe(gulp.dest('./build/css'))
        .pipe(livereload());
});

// 合并 css 任务
gulp.task('concat', function () {
    return gulp.src('./build/css/*.css')
        .pipe(concat('bundle.css'))
        .pipe(gulp.dest('./build/css/concat'))
        .pipe(livereload());
});

// 压缩 css 任务
gulp.task('cssmin', function () { 
    return gulp.src('./build/css/concat/bundle.css')
    .pipe(cssmin())
    .pipe(rename('bundle.min.css'))
    .pipe(gulp.dest('./dist/css')) 
    .pipe(livereload());
});

// 压缩 html 任务
gulp.task('htmlmin', () => {  
    return gulp.src('src/index.html')    
    .pipe(htmlmin({
        collapseWhitespace: true , // 去除空格
        removeComments:true        // 去除注释
    }))
    .pipe(gulp.dest('dist'))
    .pipe(livereload());
});


// 定义监视任务
gulp.task('watch', function () {    
    // 启动热加载服务    
    livereload.listen();    
    //2.2 通过自己服务器打开项目，自动刷新    
    connect.server({
        root: 'dist', 
        port: 3000,
        livereload: true
    });    
    //2.3. 自动打开浏览器    
    opn('http://localhost:3000/index.html');    
    //2.4. 监视指定文件（第一个参数），一旦文件发生变化，就自动执行后面的任务（第二个参数）    
    gulp.watch('src/less/*.less', gulp.series(['less', 'concat', 'cssmin']));
    gulp.watch('./src/js/*.js',   gulp.series(['babel', 'browserify', 'uglify'])); 
    gulp.watch('./src/index.html', gulp.series('htmlmin'));
});
